<template>
    <div class="wl-panel">
        <div :style="{width:setW+'px'}" class="wl-panel-wrapper">
            <div class="wl-panel-title" name="panel_title">
                <div class="wl-title-info">
                    <svg-icon :icon-class="titleIcon"></svg-icon>
                    <span class="wl-title-text" v-text="title"></span>
                    <span class="wl-sub-title-text" v-text="subTitle"></span>
                </div>
                <div class="wl-title-buttons">
                    <!-- <svg-icon class="wl-title-button" :icon-class="fieldVisible? 'btn_zy' : 'btn_by'" v-if="!hideShowFlag" clickable @click="eyeClick"></svg-icon>
                    <svg-icon class="wl-title-button" icon-class="btn_sz" v-if="!hideSettingFlag" clickable></svg-icon> -->
                    <svg-icon class="wl-title-button" icon-class="btn_gb" v-if="!hideCloseFlag" clickable @click="close"></svg-icon>
                </div>
            </div>

            <div class="wl-panel-body">
                <slot name="panel_body"></slot>
            </div>
            <div class="wl-panel-footer wl-panel-padding">
                <slot name="panel_footer"></slot>
            </div>
        </div>
    </div>
</template>
<script>
export default {
  props: {
    titleIcon: {
      type: String,
      default: "404"
    },
    title: {
      type: String,
      default: ""
    },
    subTitle: {
      type: String,
      default: ""
    },

    hideShowFlag: {
      type: Boolean,
      default: false
    },

    hideSettingFlag: {
      type: Boolean,
      default: false
    },

    hideCloseFlag: {
      type: Boolean,
      default: false
    },
    setW: String
  },
  methods: {
    close() {
      if (this.$parent) {
        this.$parent.$emit("panel-close");
      }
    },
    eyeClick() {
      this.fieldVisible = !this.fieldVisible;
      let name = this.$parent ? this.$parent.name : null;
      if (name) {
        localStorage.setItem(name, this.fieldVisible ? 1 : 0);
      }
      this.$emit("fieldVisible", this.fieldVisible);
    }
  },
  beforeMount() {
    let name = this.$parent ? this.$parent.name : null;
    if (name) {
      let flag = parseInt(localStorage.getItem(name));
      if (!isNaN(flag)) {
        this.fieldVisible = flag > 0;
      }
    } else {
      console.warn("panel name is NOT set");
    }
  },

  data() {
    return {
      fieldVisible: true
    };
  }
};
</script>
